<template>
	<view class="content">
		<view class="header" :style="{background:$store.state.bgPrimaryColor}">
			<view class="view">
				<view @click="show = true">
					<text>{{req.level_name || '课件级别'}}</text>
					<u-icon name="arrow-down-fill" color="#333" size="12"></u-icon>
				</view>
				<view @click="show1 = true">
					<text>{{req.learning_type_name || '语种'}}</text>
					<u-icon name="arrow-down-fill" color="#333" size="12"></u-icon>
				</view>
			</view>
			<!-- <u--image :showLoading="true" src="../../static/logo.png" width="32rpx" height="32rpx" radius="0"
				@click="download"></u--image> -->
		</view>
		<view class="Box">
			<view v-for="(item,index) in lists" :key="index" class="BoxView"
				@click="linkUrl(`/pages/Mine/unitLists?id=${item.textbook.id}&title=${item.textbook.title}&prompt=${item.textbook.prompt}`,item.id)">
				<u--image :showLoading="true" :src="item.textbook.img" width="196rpx" height="250rpx"
					radius="0"></u--image>
				<text>{{item.textbook.title}}</text>
			</view>
		</view>
		<view class="empty" v-if="lists.length == 0">
			<image src="../../static/null.png" mode="widthFix"></image>
			<text>暂时没有课程</text>
		</view>
		<u-picker :show="show" :columns="columns" keyName="title" @confirm="confirm" @cancel="show = false"></u-picker>
		<u-picker :show="show1" :columns="UserLearningTypes" keyName="title" @confirm="UserLearningTypesconfirm"
			@cancel="show1 = false"></u-picker>
		<u-popup :show="isShow" @close="isShow = false" @open="isShow = true" mode="center" round="20">
			<view class="NewpopupBody">
				<text class="title">确定要下载该课件吗？</text>
				<view class="but_flex">
					<button class="leftButton" :style="{'background':$store.state.buttonColor}">取消</button>
					<button class="rightButton" :style="{'background':$store.state.buttonColor}">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getUserList,
		getUserBasalLevel,
		getUserLearningType,
		getDown,
		getTypeList,
	} from '../../api/Mine.js';
	export default {
		data() {
			return {
				show: false,
				show1: false,
				isShow: false,
				columns: [],
				UserLearningTypes: [],
				req: {
					level_id: '',
					level_name: '',
					learning_type_id: '',
					learning_type_name: '',
					shop_id: uni.getStorageSync('shop_id') || 1
				},
				lists: [],
				dianji: 0
			}
		},
		onShow() {
			//this.getTypeList();
			this.getUserList();
			// this.getUserBasalLevel();
			// this.getUserLearningType();
		},
		onLoad(e) {
			this.dianji = e.dianji
		},
		methods: {
			/**
			@method 下载
			**/
			async download() {
				try {
					const res = await getDown(this.req);
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			confirm(e) {
				this.req = {
					...this.req,
					...{
						level_id: e.value[0].id || '',
						level_name: e.value[0].title || ''
					}
				};
				this.show = false;
				this.getUserList();
			},
			UserLearningTypesconfirm(e) {
				this.req = {
					...this.req,
					...{
						learning_type_id: e.value[0].id || '',
						learning_type_name: e.value[0].title || ''
					}
				};
				this.show1 = false;
				this.getUserList();
			},
			/**
			@method 等级
			**/
			async getUserBasalLevel() {
				try {
					const res = await getUserBasalLevel(this.req);
					this.columns = [...[res.data]];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 获取学习语种
			**/
			async getUserLearningType() {
				try {
					const res = await getUserLearningType(this.req);
					this.UserLearningTypes = [...[res.data]]
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 我的课前预习
			**/
			async getUserList() {
				try {
					const res = await getUserList(this.req);
					this.lists = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 教材类型
			**/
			async getTypeList() {
				try {
					const res = await getTypeList(this.req);
					this.lists = [...res.data];
					console.log(this.lists);
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			linkUrl(e, c) {
				if (this.dianji == 1) {
					uni.navigateBack()
					uni.$emit('jiaocai', {
						id: c
					})
				} else {
					uni.navigateTo({
						url: e
					});
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f6f7f9;
	}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		.header {
			width: auto;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.view {
				width: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
						color: #333333;
						font-size: 28rpx;
						font-weight: 600;
						font-family: PingFangSC, PingFang SC;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}

		.Box {
			width: 93%;
			margin: 0px auto;
			display: flex;
			flex-wrap: wrap;

			.BoxView {
				width: 196rpx;
				min-width: 158rpx;
				// border:1px solid red;
				margin-top: 30rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;

				/deep/ .u-image {
					margin: 0px auto;
					display: block;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					text-align: center;
					font-style: normal;
					display: block;
					margin-top: 10rpx;
				}
			}
		}

		.empty {
			image {
				width: 100%;
			}

			text {
				display: block;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
			}
		}

		.NewpopupBody {
			width: 550rpx;
			height: auto;
			padding-top: 70rpx;
			padding-bottom: 70rpx;
			background-color: transparent;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				display: block;
				text-align: center;
			}

			.content_text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: block;
				text-align: center;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
			}

			.but_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 50rpx;

				.leftButton {
					width: 40%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					background-color: #efefef;
				}

				.rightButton {
					width: 40%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					background-color: #267fff;
				}
			}
		}
	}
</style>